<!--
 * @Description: 
 * @Author: Wen
 * @Date: 2024-11-13 15:19:00
 * @LastEditors: Wen
 * @LastEditTime: 2024-11-13 19:52:09
 * 太棒了，又坚持了一天
-->
<!-- 页面结构 -->
<template>
    
    <div :style="{'font-size':fontSize+'px'}">
        <!-- num:{{ num }} -->
        count:{{ count }}
        <button @click="count++">count++</button>
        <button @click="fontSize++">fontSize++</button>
        <button @click="fontSize--">fontSize--</button>
    </div>
</template>
<script setup>
    import { ref } from 'vue';
    const count=ref(0);
    const fontSize = ref(20);
    const props=defineProps(['num']);
    count.value=props.num;
    function childAddFont () {
    console.log('🤡 CC - childAddFont - childAddFont:');
    fontSize.value++;
    }
    function childReduceFont () {
    console.log('🤡 CC - childReduceFont - childReduceFont:');
    fontSize.value--;
    }
    // 暴露方法给父组件
    defineExpose({ childAddFont,childReduceFont });
</script>
<!-- 样式 -->
 <!-- scoped是为了当前组件样式不要影响其他组件 -->
 <style scoped></style>